<template>
  <div class="haruyuki-mb-40">
    <el-form
      :model="rateForm"
      :rules="rateRules"
      :disabled="disabled"
      ref="rateForm"
      size="small"
    >
     <div class="alter-basic">
       <div class="row-alter">
        <div class="col-alter border-bottom">
          <span class="alter-title">支付类型</span>
        </div>
        <div class="col-alter" v-for="(k1Item, k1i) in rateInfo.k1" :key="k1i">{{k1Item}}</div>
      </div>
      <div class="row-alter">
        <div class="col-alter border-bottom">
          <span class="alter-title">变更内容</span>
        </div>
        <div class="col-alter" v-for="(k2Item, k2i) in rateInfo.k2" :key="k2i">{{k2Item}}</div>
     </div>
     <div class="row-alter">
        <div class="col-alter border-bottom">
          <span class="alter-title">变更前内容</span>
        </div>
        <div class="col-alter" v-for="(k3Item, k3i) in rateInfo.k3" :key="k3i">{{k3Item}}</div>
     </div>
     <div class="row-alter">
        <div class="col-alter border-bottom">
          <span class="alter-title">变更后内容</span>
        </div>
        <div class="col-alter cols" v-for="(item, key, i) in rateForm" :key="i">
          <el-form-item label="" label-width="0" :prop="key">
            <el-input
                class="haruyuki-width-100"
                v-model="rateForm[key]"
                @keyup.native="proving($event, item)"
                @change="handleInput($event, key, i)"
            ></el-input>
          </el-form-item>
        </div>
      </div>
     </div>
    </el-form>
  </div>
</template>

<script>
export default {
    data() {
        return {
          rateRules: {},
          rateInfo: {
            k1: [],
            k2: [],
            k3: [],
            k4: [],
            k5: [],
            k6: [],
          },
          rateFormPlus: {}
        }
    },
    props: {
      rateForm: {
        type: Object,
        default: () => {
          return {}
        }
      },
      oldRateForm: {
        type: Object,
        default: () => {
          return {}
        }
      },
      rateArray: {
        type: Array,
        default: () => {
          return []
        }
      },
      disabled: {
        type: Boolean,
        default: false
      },
    },
    watch: {
      // rateForm: {
      //   handler(value) {
      //     console.log(value, 'value');
      //     let list = this.defaultList;
      //     if (value.aisleCode === 'A0000013') {
      //       for (const item of list) {
      //         this.handleInput(value[item], item);
      //       }
      //     }
      //   },
      //   // 深度监听
      //   deep: true,
      //   // 这里增加了一个immediate属性，说明监听到props传参后立即先去执行handler方法
      //   immediate: true
      // }
    },
    created() {
      this.infoData();
    },
    methods: {
        infoData() {
          for (const item of this.rateArray) {
            this.rateInfo.k1.push(item['k1']);
            this.rateInfo.k2.push(item['k2']);
            this.rateInfo.k3.push(item['k3']);
            this.rateInfo.k4.push(item['k4']);
            this.rateInfo.k5.push(item['k5']);
            this.rateInfo.k6.push(item['k6']);
            this.$set(this.rateForm, item['k5'], item['k4'])
            this.$set(this.rateFormPlus, item['k5']+'Plus', item['k6'])
            this.$emit('update:rateForm', this.rateForm)
          }
        },
        /* 绑定值不能小于最低值 input */
        handleInput(value, key, index) {
          if (value*1 < this.rateFormPlus[key+'Plus']*1) {
            // this.rateForm[key] = this.rateFormPlus[key+'Plus'];
            this.$message({type: "error",message: this.rateInfo.k2[index]+'不能低于最低值：'+(this.rateFormPlus[key+'Plus']*1)});
          }
        },
        /* input 数值检验 */
        proving(e, min) {
            var keynum = window.event ? e.keyCode : e.which;   //获取键盘码
            // var keychar = String.fromCharCode(keynum);  //获取键盘码对应的字符
            if (keynum == 189 || keynum == 109) { //禁止输入负数
              e.target.value = min || 0
            }
            // if (e.target.value.indexOf('.') == 1) { //如果值里面有’.‘的话，进去检测位小数点大于1位的话只保留一位
            //     var x = String(e.target.value).indexOf(".")+4;//得到小数点的位置
            //     var y = String(e.target.value).length - x;//小数点的位数
            //     if(y > 1){
            //         e.target.value = this.getBit(e.target.value, 4)
            //     }
            // }
            if (e.target.value.indexOf(".") != -1) {
              e.target.value = e.target.value.replace(/\.{2,}/g, '.')
              if (e.target.value.length > 8) {
                e.target.value = e.target.value.substr(0, e.target.value.length - 1)
              }
            }
            // if (e.target.value > 1) {
            //   e.target.value = 1
            // }
        },
        /* input 金额数值检验 */
        numberProving(e) {
            var keynum = window.event ? e.keyCode : e.which;   //获取键盘码
            // var keychar = String.fromCharCode(keynum);  //获取键盘码对应的字符
            if (keynum == 189 || keynum == 109) { //禁止输入负数
              e.target.value = 0
            }
            if (e.target.value.indexOf(".") != -1) {
              e.target.value = e.target.value.replace(/\.{2,}/g, '.')
              if (e.target.value.length > 6) {
                e.target.value = e.target.value.substr(0, e.target.value.length - 1)
              }
            }
        },
        /* 扫码费率 input 当前弃用 */
        changeInput(value, min) {
          if (value < min) {
            value = min;
          }
        },
    }
}
</script>

<style lang="scss" scoped>
.alter-basic {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  border: 1px solid #EBEEF5;

  .alter-title {
    font-weight: bold;
    color: rgba(0, 0, 0, .85);
  }
}

.row-alter {
  display: flex;
  flex-direction: column;
  // &::after, &::before {
  //   display: table;
  // }
  &:nth-child(1) {
    color: #485563;
    font-weight: bold;
  }
  &:nth-child(n+2) {
    border-left: 1px solid #EBEEF5;
  }
}

.col-alter {
  padding-left: 10px;
  padding-right: 10px;
  line-height: 46px;
  height: 46px;
  // margin-bottom: 6px;
  font-size: 14px;
  &.border-bottom {
    border-bottom: 1px solid #EBEEF5;
    word-break: break-word;
    background-color: #fafafa;
  }
  &.margin-top {
    margin-top: 6px;
  }
  &.margin-bottom {
    margin-bottom: 6px;
  }
}
.cols div:first-child:before {
  margin-top: 6px;
}
</style>